<template>
  <form class="space-y-4">
    <!-- Wi-Fi -->
    <div>
      <label class="label">
        <span class="label-text font-medium">Wi-Fi SSID</span>
      </label>
      <input
        v-model="config.wifi_ssid"
        type="text"
        placeholder="MyWiFi"
        class="input input-bordered w-full"
      />
    </div>

    <div>
      <label class="label">
        <span class="label-text font-medium">Wi-Fi 密码</span>
      </label>
      <input
        v-model="config.wifi_pass"
        type="password"
        placeholder="••••••••"
        class="input input-bordered w-full"
      />
    </div>

    <!-- 间隔时间 -->
    <div>
      <label class="label">
        <span class="label-text font-medium">更新间隔 (ms)</span>
      </label>
      <input
        v-model.number="config.update_interval"
        type="number"
        class="input input-bordered w-full"
      />
    </div>
    <div>
      <label class="label">
        <span class="label-text font-medium">采集间隔 (ms)</span>
      </label>
      <input
        v-model.number="config.collection_interval"
        type="number"
        class="input input-bordered w-full"
      />
    </div>
    <!-- K & B 组：带背景卡片区分 -->

    <div class="w-full">
      <!-- <div class="w-full grid-cols-2 grid"> -->
      <div class="bg-base-300/30 rounded-lg p-4 space-y-3">
        <h3 class="text-sm font-bold text-primary mb-1">温度校准系数</h3>
        <div>
          <label class="label">
            <span class="label-text">temp_k</span>
          </label>
          <input
            v-model.number="config.temp_k"
            type="number"
            step="0.01"
            class="input input-bordered input-sm w-full"
          />
        </div>
        <div>
          <label class="label">
            <span class="label-text">temp_b</span>
          </label>
          <input
            v-model.number="config.temp_b"
            type="number"
            step="0.01"
            class="input input-bordered input-sm w-full"
          />
        </div>
      </div>
      <div class="bg-base-300/30 rounded-lg p-4 space-y-3">
        <h3 class="text-sm font-bold text-secondary mb-1">湿度校准系数</h3>
        <div>
          <label class="label">
            <span class="label-text">humi_k</span>
          </label>
          <input
            v-model.number="config.humi_k"
            type="number"
            step="0.01"
            class="input input-bordered input-sm w-full"
          />
        </div>
        <div>
          <label class="label">
            <span class="label-text">humi_b</span>
          </label>
          <input
            v-model.number="config.humi_b"
            type="number"
            step="0.01"
            class="input input-bordered input-sm w-full"
          />
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="join w-full">
      <button
        type="button"
        class="btn btn-primary glass join_item w-[45%] m-5"
        @click="get"
      >
        读取
      </button>
      <button
        type="button"
        class="btn btn-primary glass join_item w-[45%] m-5"
        @click="save"
      >
        保存
      </button>
    </div>
  </form>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const config = reactive({
  wifi_ssid: "",
  wifi_pass: "",
  temp_k: 1,
  temp_b: 0,
  humi_k: 1,
  humi_b: 0,
  update_interval: 5000,
  collection_interval: 1000,
});

function save() {
  // 这里把 config 对象 POST 到后端或写本地存储
  console.log("保存配置:", config);
}
function get() {
  // 这里从后端或本地存储读取 config 对象
  console.log("读取配置:", config);
}
</script>
